<template>
	<el-container>
		<el-header>
			<fragments_header></fragments_header>
		</el-header>
		<el-container>
			<el-aside :width="$store.state.asideWidth">
				<fragments_menu></fragments_menu>
			</el-aside>
			<el-main>
				<fragments_tablist></fragments_tablist>
				<router-view v-slot="{ Component }">
					<!-- 全局过渡动画 -->
					<transition name="fade">
						<!-- 设置页面缓存 -->
						<keep-alive :max="10">
							<component :is="Component"></component>
						</keep-alive>
					</transition>
				</router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script setup>
import fragments_header from './components/fragments_header.vue'
import fragments_menu from './components/fragments_menu.vue'
import fragments_tablist from './components/fragments_tablist.vue'

</script>

<style>
.el-aside {
	transition: all 0.2;
}

.fade-enter-from {
	opacity: 0;
	-webkit-transform: translate3d(0, -100%, 0);
	transform: translate3d(0, -100%, 0);
}

.fade-enter-to {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}	

.fade-leave-from {
	opacity: 1;
}

.fade-leave-to {
	opacity: 0;
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
}

.fade-enter-active,
.fade-leave-active {
	transition: all 0.3s;
}

.fade-enter-active {
	transition-delay: 0.3s;
}
</style>